import React, { useEffect, useState } from 'react';
import ECharts from 'echarts-for-react';
import { Button } from 'choerodon-ui/pro';
import notification from 'utils/notification';

const MyChart = props => {
  console.log('MyChartProps', props);
  const {
    handleChangeOutputParams,
    setEventFunction,
    temperatureData = [],
    handleRunEvent,
    flow1,
  } = props;
  // 修改 温度状态
  const [config, setConfig] = useState<any>(null);

  const handleFilter = () => {
    setConfig({
      data: ['Evaporation', 'Precipitation', 'Temperature'],
    });
  };

  const handleClick = () => {
    if (flow1?.flowCode) {
      handleRunEvent(flow1?.flowCode);
    }
  };

  useEffect(() => {
    setEventFunction('fn1', param1 => {
      notification.success({
        message: '内置函数执行成功',
        description: `内置函数执行了: 函数入参是${param1}。`,
      });
    });
    setEventFunction('handleFilter', handleFilter);
    handleChangeOutputParams({
      property: 'outParam1',
      data: '修改后的自定义出参1',
    });
  }, []);

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999',
        },
      },
    },
    toolbox: {
      feature: {
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ['line', 'bar'] },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    legend: config,
    xAxis: [
      {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisPointer: {
          type: 'shadow',
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: 'Precipitation',
        min: 0,
        max: 250,
        interval: 50,
        axisLabel: {
          formatter: '{value} ml',
        },
      },
      {
        type: 'value',
        name: 'Temperature',
        min: 0,
        max: 25,
        interval: 5,
        axisLabel: {
          formatter: '{value} °C',
        },
      },
    ],
    series: [
      {
        name: 'Evaporation',
        type: 'bar',
        tooltip: {
          valueFormatter: function(value) {
            return value + ' ml';
          },
        },
        data: [
          2.0,
          4.9,
          7.0,
          23.2,
          25.6,
          76.7,
          135.6,
          162.2,
          32.6,
          20.0,
          6.4,
          3.3,
        ],
      },
      {
        name: 'Precipitation',
        type: 'bar',
        tooltip: {
          valueFormatter: function(value) {
            return value + ' ml';
          },
        },
        data: [
          2.6,
          5.9,
          9.0,
          26.4,
          28.7,
          70.7,
          175.6,
          182.2,
          48.7,
          18.8,
          6.0,
          2.3,
        ],
      },
      {
        name: 'Temperature',
        type: 'line',
        yAxisIndex: 1,
        tooltip: {
          valueFormatter: function(value) {
            return value + ' °C';
          },
        },
        // data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        data: temperatureData,
      },
    ],
  };

  return (
    <>
      <div>
        <Button color="primary" onClick={handleClick}>
          调用事件流
        </Button>
      </div>
      <ECharts option={option} />
    </>
  );
};

export default MyChart;
